<template>

  <div class="generated-container" v-if="param">
    <!-- 可滚动的图片区域 -->
    <div class="image-scroll-container" ref="scrollContainer" v-if="param.bodyImg">
      <img v-for="(img, index) in param.bodyImg.split(',')" :key="index" :src="staticService(img)" class="top-image" />
    </div>

    <!-- 右侧悬浮图片：注意层级和定位 -->
    <img v-if="param.rightImg" :src="staticService(param.rightImg)" class="right-image" />

    <!-- 底部悬浮图片：注意层级和定位 -->
    <img v-if="param.bottomImg" :src="staticService(param.bottomImg)" class="bottom-image" :style="{ bottom: `${param.bottomDistance}px` }" />
  </div>
</template>
<script setup lang="ts">
// 定义 props
import { JqtSpreadLinkVO, PageModeContent } from '@/api/bus/jqtSpreadLink/types';
import { ImageModeVo } from '@/views/bus/jqtSpreadLink/mode/imageMode.vue';
import { staticService } from '@/utils/ruoyi';
const props = defineProps({
  // 对象类型的默认值必须是函数返回
  data: {
    type: Object,
  }
})
const param = ref<ImageModeVo>();
onMounted(() => {
  console.log(props.data.pageModeContent)
  param.value = props.data.pageModeContent.image as ImageModeVo;
});
</script>
<style scoped lang="scss">
.generated-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2px;
  box-sizing: border-box;
}

.image-scroll-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.top-image {
  width: 100%;
  display: block;
}

.right-image {
  position: absolute;
  top: 20%;
  right: 10px;
  transform: translateY(-50%);
  max-width: 60px;
  height: auto;
  z-index: 2;
}

.bottom-image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  height: auto;
  z-index: 2;
}
</style>
